<template> 
    <div class="container" @click="handle">
        <img class="imgC l0" :src="list[imgIndex]" alt="图片加载失败" ref="imgc">
        <div class="imgC l1" ref="l1"></div>
        <div class="imgC l2" ref="l2"></div>
        <img class="middle" v-show="isLarger" :src="list[imgIndex]"/>
        <div class="backdrop" v-show="isLarger" @click="smaller"></div>
    </div>
</template>

<script>
export default {
    props: {
        list: Array
    },
    data() {
        return {
            isLarger: false,
            imgIndex: 0,
            list: [
                "https://img2.baidu.com/it/u=498891593,3830463784&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500",
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc9ff47eebae71ff4fb2f2e52ad611d59d16329762e0d0-SKp3YX_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650033036&t=3778698de0f73efe73a474bf7a484b15",
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F29%2F20200329112640_KShnj.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650033036&t=0edfcea3b0d2e4dc9fa000b030e0fc4a",
            ],
            preloadId: 1,
            preImg: null,
        }
    },
    mounted() {
        const imgc = this.$refs.imgc;
        imgc.onload = () => {
            const height = imgc.clientHeight;
            this.$refs.l1.style.height = `${height}px`;
            this.$refs.l2.style.height = `${height}px`;
            // imgc.onload = null;
        }
        //图片预取操作 
        this.preLoad();
    },
    methods: {
        handle() {
            if(!this.isLarger)this.isLarger = true;
            else { //图片循环
                this.imgIndex = (this.imgIndex + 1)%this.list.length;
            }
        },
        smaller(e) {
            this.isLarger = false;
            e.stopPropagation();
        },
        preLoad() {
            if(!this.preImg)this.preImg = new Image();
            if(this.preloadId < this.list.length) {
                this.preImg.src = this.list[this.preloadId++];
                this.preImg.addEventListener("load",this.preLoad);
            }
        }
    }
}
</script>

<style scoped lang="less">
    .container {
        user-select: none;
        cursor: pointer;
        display: inline-block;
        position: relative;
        .middle {
            position: fixed;
            top: 50%;
            left: 50%;
            max-height: 800px;
            max-width: 1000px;
            transform: translate(-50%,-50%);
            z-index: 2;

        }
        .backdrop{
                content: "1231231";
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0,0,0,.5);
        }
        .imgC {
            width: 300px;
            background: rgb(214, 212, 212);
            border: 1px solid black;
        }
        .l1 {
            position: absolute;
            top: 3%;
            left: 0.5%;
            z-index: -1;
        }
        .l2 {
            position: absolute;
            top: 5%;
            left: 1%;
            z-index: -2;
        }
    }
</style>